<template>
  <div >
    <form-head @onSubmit="onSubmit" :is_change="is_change"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="150px" class="layout-all form-width" :label-position="isMobile()?'top':'left'">
      <el-form-item label="文章标题:" prop="title">
        <el-input
          v-model="form.title"
          placeholder="请输入文章标题"
        />
      </el-form-item>

      <el-form-item label="文章分类:" prop="cat_id">
        <el-cascader
          v-model="form.cat_id"
          clearable
          :options="cat_options"
          @change="handleShopCate($event)"
          placeholder="请选择文章分类"
        >
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </el-form-item>

      <el-form-item label="封面图:" prop="thumb">
        <upload-pic :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100"/>
      </el-form-item>
      <el-form-item label="文章作者:" prop="author">
        <el-input
          v-model="form.author"
          placeholder="请输入文章作者"
        />
      </el-form-item>
      <el-form-item label="作者邮箱:" prop="author_email">
        <el-input
          v-model="form.author_email"
          placeholder="请输入作者邮箱"
        />
      </el-form-item>

      <el-form-item label="关键字:" prop="keywords">
        <el-input
          v-model="form.keywords"
          placeholder="请输入关键字"
        />
      </el-form-item>
      <el-form-item label="视频路径(可选):" prop="url">
        <el-input
          v-model="form.video_url"
          placeholder="请输入视频路径"
        />
        <el-link type="success" icon="el-icon-video-camera-solid" style="margin:0 10px" @click="logistics_isshow=true">选择视频</el-link>
      </el-form-item>

      <el-form-item label="附件地址:" prop="file_url">
        <el-input
          v-model="form.file_url"
          placeholder="请输入附件地址"
        />
      </el-form-item>

      <el-form-item label="链接地址:" prop="link">
        <el-input
          v-model="form.link"
          placeholder="请输入链接地址"
        />
      </el-form-item>

      <el-form-item label="发布时间:" prop="publish_time">
        <el-date-picker
          v-model="form.publish_time"
          type="date"
          placeholder="选择发布时间"
          @change="dateChange()"
        />
      </el-form-item>

      <el-form-item label="文章摘要:" prop="description">
        <el-input
          type="textarea"
          :rows="5"
          v-model="form.description"
          placeholder="请输入文章摘要"
        />
      </el-form-item>
      <el-form-item label="浏览量:" prop="click">
        <el-input
          v-model="form.click"
          placeholder="请输入浏览量"
        />
      </el-form-item>
      <el-form-item label="点赞数:" prop="give">
        <el-input
          v-model="form.give"
          placeholder="请输入点赞数"
        />
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input-number
          v-model="form.sort"
          placeholder="请输入排序"
          class="form-width-n"
        />
      </el-form-item>
      <el-form-item label="是否启用:" prop="is_open">
        <el-switch v-model="form.is_open" />
      </el-form-item>
      <el-form-item v-if="is_show" label="详情:" prop="content">
        <rich-text ref="myQuillEditor" :content="form.content" @change="is_change=true" class="form-width-w"/>
      </el-form-item>
      <el-form-item v-if="!is_show" label="详情:" prop="content">
        <el-input
          v-model="form.content"
          placeholder="请输入首页公告"
        />
      </el-form-item>
    </el-form>
    <!-- 视频库 -->
    <drawer title="视频库" :isShow="logistics_isshow"  @update:isShow="logistics_isshow=false" width=".5">
      <video-manager @selectVideo="selectVideo"></video-manager>
    </drawer>
    <el-backtop ></el-backtop>
  </div>
</template>

<script>
import richText from "../../components/rich_text/rich_text";
import videoManager from "../../components/videoManager/videoManager";
export default {
  name:'article_form',
  components: { richText,videoManager },
  data() {
    return {
      //是否显示视频库列表
      logistics_isshow:false,
      is_change: undefined,
      is_show: true,
      id: 0,
      cat_options: [],
      form: {
        id: 0,
        cat_id: 1,
        title: "",
        content: "",
        author: "",
        author_email: "",
        keywords: "",
        article_type: 2,
        is_open: true,
        add_time: "",
        file_url: "",
        open_type: 0,
        link: "",
        description: "",
        click: 0,
        publish_time: "",
        thumb: "",
        give: 0,
      },
      rules: {
        title: [{ required: true, message: "请输入文章标题", trigger: "blur" }],
        cat_id: [
          { required: true, message: "请选择文章分类", trigger: "blur" },
        ],
        author: [
          { required: true, message: "请输入文章作者", trigger: "blur" },
        ],
        keywords: [
          { required: true, message: "请输入关键字", trigger: "blur" },
        ],
        publish_time: [
          { required: true, message: "请输入发布时间", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入文章摘要", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.id = (this.$route.params && this.$route.params.id)||0
    this.$setTagsViewTitle(this.id)
    this.init_into();
  },
  methods: {
    //选择视频回调
    selectVideo (item) {
      console.log(item)
      this.form.video_url = item.url
      this.logistics_isshow = false
    },
    // 出售时间
    dateChange() {
      const date = new Date(this.form.publish_time);
      const Y = date.getFullYear() + "";
      const M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      const D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      this.form.publish_time = Y + "-" + M + "-" + D;
    },
    // 分类赋值
    handleShopCate(val) {
      this.form.cat_id = val[1];
      for (let i in this.cat_options) {
        if ((this.cat_options[i].id = val[0])) {
          if (this.cat_options[i].cat_name === "首页公告") {
            this.is_show = false;
            break;
          } else {
            this.is_show = true;
            break;
          }
        }
      }
    },
    // 提交
    onSubmit(formName) {
      const form = this.form;
      if (this.is_show === true) {
        form.content = this.$refs.myQuillEditor.editor_content;
      }
      console.log(form);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          debugger;
          form.id = this.id;
          form.is_open === true ? (form.is_open = 1) : (form.is_open = 0);
          this.get("/admin/Article/save", form, "POST").then((e) => {
            this.$msg_ok("success", "操作成功");
            this.$back();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    // 返回
    bk() {
      this.$router.back();
    },
    // 处理数据
    getCateOption(cat_options) {
      var sub_id = [];
      var new_cat = [];
      // var new_options = {
      //   sub:[]
      // };
      if (cat_options.length === 0) {
        return;
      }
      // 把对应的子节点放在父节点里
      for (var i = 0; i < cat_options.length; i++) {
        const id = cat_options[i].id;
        cat_options[i].sub = [];
        for (let j in cat_options) {
          if (cat_options[j].parent_id === id) {
            cat_options[i].sub.push(cat_options[j]);
            sub_id.push(cat_options[j].id);
          }
        }
        new_cat.push(cat_options[i]);
      }
      console.log(sub_id);
      // 删除最外层子节点
      for (let k in sub_id) {
        // let index = new_cat.findIndex((e) => (e.id = sub_id[k]));
        for (let m in new_cat) {
          if (new_cat[m].id === sub_id[k]) {
            new_cat.splice(1, m);
          }
        }
      }
      // 删除子节点下的sub
      for (let l in new_cat) {
        for (let p in new_cat[l].sub) {
          delete new_cat[l].sub[p].sub;
        }
      }
      this.cat_options = JSON.parse(
        JSON.stringify(new_cat)
          .replace(/id/g, "value")
          .replace(/cat_name/g, "label")
          .replace(/sub/g, "children")
      );
    },
    // 获取当前数据
    init_into() {
      this.get("/admin/Article/info?id=" + this.id, "POST").then((e) => {
        const tpl = e.info.tpl;
        this.getCateOption(e.cate);
        if(this.id>0){
          this.form = e.info.tpl;
          this.form.is_open =this.form.is_open== 1
          this.$refs.myQuillEditor.editor_content = this.form.content;
        }
        
        setTimeout(()=>{this.is_change=false},100)
      });
    },
  },
  watch: {
    form:{
      handler (val, oldVal) {
        if(this.is_change!=undefined)
          this.is_change=true
      },
      deep:true
    }
  }
};
</script>

<style>
.layout-all {
  margin: 10px;
}
.spces_div {
  border: 1px solid #dcdfe6;
  height: 100%;
  width: 30%;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
</style>
